<template>
    <div class="app-container">
        <public-search @on-query="handleQuery" @on-reset="resetQuery">
            <el-form :model="queryParams" ref="queryForm" size="small" label-width="118px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="检查计划执行人" prop="executors">
                            <el-input size="small" v-model="queryParams.executors" placeholder="请输入作业项目" clearable
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="班次" prop="classesed">
                            <el-select size="small" v-model="queryParams.classesed" placeholder="请选择班次" clearable
                                style="width: 100%;" @change="handleQuery">
                                <el-option v-for="dict in dict.type.classes" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="状态" prop="status">
                            <el-select size="small" v-model="queryParams.status" placeholder="请选择状态" clearable
                                style="width: 100%;" @change="handleQuery">
                                <el-option v-for="dict in dict.type.check_plan_status" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </public-search>

        <public-table>
            <template slot="operate">
                <div>
                    <el-button type="primary" @click="handleAdd">制定检查计划</el-button>
                </div>
            </template>
            <template slot="table">
                <el-table v-loading="loading" border :data="dataList">
                    <el-table-column label="序号" align="center" width="50px" type="index" />
                    <el-table-column label="检查计划执行人" prop="executorNames" />
                    <el-table-column label="车辆" prop="vehicles" />
                    <el-table-column label="班次" prop="classesed">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.classes" :value="scope.row.classesed" />
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" prop="status" width="200" align="center">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.check_plan_status" :value="scope.row.status" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200"
                        fixed="right">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" @click="handleDetail(scope.row)">详情</el-button>
                            <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
                                v-if="scope.row.status == '3'">编辑</el-button>
                            <el-button class="delete-btn" size="mini" type="text" v-if="scope.row.status == '3'"
                                @click="handleDelete(scope.row)">撤销</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <template slot="pagination">
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
            </template>
        </public-table>



        <!-- 添加或修改对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="1350px" append-to-body>
            <div style="width: 95%;margin: 0 auto;height: 680px;">
                <el-form ref="form" :model="form" :rules="rules" inline>

                    <el-form-item label="检查计划执行人" prop="executorNames" size="small">
                        <el-input v-model="form.executorNames" placeholder="请选择检查计划执行人" readonly style="width: 400px;">
                            <el-button v-if="openType !== 'detail'" slot="append" @click="onClickSelectUser">选择</el-button>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="车辆" prop="vehicles" size="small" style="margin-left: 15px;">
                        <el-input v-model="form.vehicles" placeholder="请选择车辆" :disabled="openType === 'detail'" />
                    </el-form-item>

                    <el-form-item label="班次" prop="classesed" size="small" style="margin-left: 15px;">
                        <el-select size="small" v-model="form.classesed" placeholder="请选择班次" style="width: 100%;"
                            :disabled="openType === 'detail'">
                            <el-option v-for="dict in dict.type.classes" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>


                </el-form>

                <div style="display: flex;align-items: center;justify-content: space-between;margin: 10px 0;"
                    v-if="openType !== 'detail'">
                    <el-button type="primary" plain size="small" @click="onClickSelectReport">选择检查项目</el-button>
                    <el-button type="primary" size="small" @click="submitForm">计划下发</el-button>
                </div>

                <el-table v-loading="loading" border :data="projectList" max-height="550px">
                    <el-table-column label="" align="center" width="100" fixed="left" v-if="openType !== 'detail'">
                        <template slot-scope="scope">
                            <el-button class="delete-btn" size="mini" type="text"
                                @click="() => projectList.splice(scope.$index)">移除</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="序号" align="center" width="55px" type="index" />
                    <el-table-column label="施工单位" prop="constructionOrganization" width="150" />
                    <el-table-column label="井号" prop="wellNo" width="120" />
                    <el-table-column label="井别" prop="wellType" width="100" />
                    <el-table-column label="作业项目" prop="projectName" width="150">
                        <template slot-scope="scope">
                            <el-popover placement="top-start" :open-delay="500" width="400" trigger="hover">
                                <div>
                                    <div v-for="(str, index) in str2List(scope.row.projectName)" :key="index">
                                        {{ index + 1 }}、{{ str }}
                                    </div>
                                </div>
                                <div class="text-overflow-ellipsis pointer" slot="reference">{{ scope.row.projectName }}
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="风险因素" prop="riskFactor" min-width="100">
                        <template slot-scope="scope">
                            <el-popover placement="top-start" :open-delay="500" width="800" trigger="hover">
                                <div>
                                    <div v-for="(str, index) in str2List(scope.row.riskFactor)" :key="index">
                                        {{ index + 1 }}、{{ str }}
                                    </div>
                                </div>
                                <div class="text-overflow-ellipsis pointer" slot="reference">{{ scope.row.riskFactor }}
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="可能导致事故类型" prop="accidentType" min-width="100">
                        <template slot-scope="scope">
                            <el-popover placement="top-start" :open-delay="500" width="400" trigger="hover">
                                <div>
                                    <div v-for="(str, index) in str2List(scope.row.accidentType)" :key="index">
                                        {{ index + 1 }}、{{ str }}
                                    </div>
                                </div>
                                <div class="text-overflow-ellipsis pointer" slot="reference">{{ scope.row.accidentType }}
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="主要管控措施" prop="controlMeasure" min-width="100">
                        <template slot-scope="scope">
                            <el-popover placement="top-start" :open-delay="500" width="800" trigger="hover">
                                <div>
                                    <div v-for="(str, index) in str2List(scope.row.controlMeasure)" :key="index">
                                        {{ index + 1 }}、{{ str }}
                                    </div>
                                </div>
                                <div class="text-overflow-ellipsis pointer" slot="reference">{{ scope.row.controlMeasure }}
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="所在平台" prop="hostPlatform" width="130" />
                    <el-table-column label="开工日期" prop="workStartTime" width="170" />
                    <el-table-column label="填报日期" prop="fillTime" width="170" />

                    <el-table-column label="06:00-16:00" prop="buildTimeOne" width="100">
                        <template slot-scope="scope">
                            <el-popover placement="top-start" :open-delay="500" width="400" trigger="hover">
                                <div>{{ scope.row.buildTimeOne }}</div>
                                <div class="text-overflow-ellipsis pointer" slot="reference">{{ scope.row.buildTimeOne
                                }}</div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="16:00-24:00" prop="buildTimeTwo" width="100">
                        <template slot-scope="scope">
                            <el-popover placement="top-start" :open-delay="500" width="400" trigger="hover">
                                <div>{{ scope.row.buildTimeTwo }}</div>
                                <div class="text-overflow-ellipsis pointer" slot="reference">{{ scope.row.buildTimeTwo
                                }}</div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="00:00-06:00" prop="buildTimeThree" width="100">
                        <template slot-scope="scope">
                            <el-popover placement="top-start" :open-delay="500" width="400" trigger="hover">
                                <div>{{ scope.row.buildTimeThree }}</div>
                                <div class="text-overflow-ellipsis pointer" slot="reference">{{ scope.row.buildTimeThree
                                }}
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="下步工序" prop="nextStep" min-width="100" />
                </el-table>

            </div>

        </el-dialog>

        <SelectUser ref="SelectUserRef" @select="onSelectUser"></SelectUser>
        <SelectReport ref="SelectReportRef" @select="onSelectReport"></SelectReport>
    </div>
</template>
  
<script>
import Api from '@/api/business/risk/plan'
import { mapGetters } from 'vuex'
import moment from "moment"
import SelectUser from "@/components/SelectUser/index"
import SelectReport from "@/views/business/risk/report/SelectReport"

const options = {
    page: {
        title: "检查计划",
        name: "RiskPlan"
    },
    row: {
        id: "id",
        title: ""
    },
    form: {
        insertTitle: "新增检查计划",
        updateTitle: "编辑检查计划",
        detailTitle: "查看检查计划",
    }
}

export default {
    name: options.page.name,
    components: { SelectUser, SelectReport },
    dicts: ["classes", "check_plan_status"],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 总条数
            total: 0,
            dataList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            openType: "",

            // 日期范围
            dateRange: [],

            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                executors: "",
                classesed: "",
                status: "",
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                executors: [
                    { required: true, message: '请选择检查计划执行人', trigger: 'submit' }
                ],
                vehicles: [
                    { required: true, message: '请输入车辆', trigger: 'submit' }
                ],
                classesed: [
                    { required: true, message: '请选择班次', trigger: 'submit' }
                ],
            },

            projectList: [], // 选择的检查项目列表
            userList: [], // 选择的检查项目列表
        }
    },
    computed: {
        ...mapGetters(["user"])
    },
    created() {
        this.getList()
    },
    methods: {
        str2List(str) {
            try {
                return str ? str.split("|") : []
            } catch (e) {
                return []
            }
        },

        /** 查询数据列表 */
        getList() {
            this.loading = true
            Api.query(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
                this.dataList = response.data
                this.total = response.total
                this.loading = false
            }
            )
        },


        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },

        // 表单重置
        reset() {

            this.form = {
                "reportId": "", //报备记录id
                "executors": "", //检查计划执行人
                "executorNames": '', //检查计划执行人
                "vehicles": "", //车辆
                "classesed": "" //班次
            }
            this.resetForm('form')
            this.projectList = []
            this.userList = []
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },


        /** 新增按钮操作 */
        handleAdd() {
            this.reset()
            this.open = true
            this.openType = "create"
            this.title = options.form.insertTitle
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset()
            const id = row[options.row.id]
            Api.get(id).then(res => {
                this.form = res.data
                this.open = true
                this.openType = "update"
                this.title = options.form.updateTitle

                this.projectList = res.data.reportList
            })
        },
        /** 详情按钮操作 */
        handleDetail(row) {
            this.reset()
            const id = row[options.row.id]
            Api.get(id).then(res => {
                this.form = res.data
                this.open = true
                this.openType = "detail"
                this.title = options.form.detailTitle

                this.projectList = res.data.reportList
            })
        },


        onClickSelectUser() {
            this.$refs.SelectUserRef.show(this.userList)
        },

        onSelectUser(list) {
            this.form.executors = list.map(item => item.userId).join("|")
            this.form.executorNames = list.map(item => item.userName).join("|")
            this.userList = list
        },

        onClickSelectReport() {
            this.$refs.SelectReportRef.show(this.projectList)
        },

        onSelectReport(list) {
            this.form.reportId = list.map(item => item.id).join("|")
            this.projectList = list
        },


        /** 提交按钮 */
        submitForm: function () {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.form.reportId === '') return this.$modal.msgWarning("请选择检查项目")

                    this.$modal.confirm('即将下发当前计划，请确认').then(() => {
                        if (this.form[options.row.id] != undefined) {
                            return Api.update(this.form)
                        } else {
                            return Api.insert(this.form)
                        }
                    }).then(() => {
                        this.$modal.msgSuccess('计划已下发')
                        this.reset()
                        this.getList()
                        if (this.form[options.row.id] != undefined) {
                            this.open = false
                        }
                    }).catch((e) => {
                        console.log(e)
                    })

                }
            })
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row[options.row.id]
            this.$modal.confirm('撤销计划后不可恢复，是否确定撤销此计划？').then(function () {
                return Api.del(ids)
            }).then(() => {
                this.getList()
                this.$modal.msgSuccess('撤销成功')
            }).catch(() => {
            })
        },

    }
}
</script>
  
  